<template>
  <div class="facility-add">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <van-cell-group class="facility-add-items">
      <van-field label="设备图片" readonly center>
        <template #right-icon>
          <van-uploader v-model="image" multiple :max-count="3" :after-read="afterRead" />
        </template>
      </van-field>
      <van-field label="设备名称" v-model="name" placeholder="请输入设备名称" input-align="right" />
      <van-field label="设备品牌" v-model="deviceclass" placeholder="请输入设备品牌" input-align="right" />
      <van-field label="设备型号" v-model="devicetype" placeholder="请输入设备型号" input-align="right" />
      <van-field label="设备租金" v-model="price" type="number" placeholder="请输入设备租金" input-align="right">
        <template #extra><span style="margin-left: 5px;">元</span></template>
      </van-field>
      <van-field label="设备毛重" v-model="weight" type="number" placeholder="请输入设备毛重" input-align="right">
        <template #extra><span style="margin-left: 5px;">Kg</span></template>
      </van-field>
      <van-field label="功率" v-model="power" type="number" placeholder="请输入设备功率" input-align="right">
        <template #extra><span style="margin-left: 5px;">W</span></template>
      </van-field>
      <van-field label="生产商" v-model="vendor" placeholder="请输入设备生产商" input-align="right" />
      <van-field label="冻眠产品" v-model="manufacture" placeholder="请输入设备允许冻眠的产品" type="textarea" class="facility-introduce" maxlength="300" show-word-limit :autosize="{minHeight:80}" input-align="right" />
      <van-field label="简介" v-model="remark" placeholder="请输入设备简介" type="textarea" class="facility-introduce" maxlength="300" show-word-limit :autosize="{minHeight:80}" input-align="right" />
    </van-cell-group>
    <div class="facility-add-set">
      <div class="set-center">
        <van-button round type="info" :disabled='comshow' color="#1bb89c" @click="addfacility()">添 加</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "FacilityAdd",
  data () {
    return {
      comshow: false,
      disabled: false,
      showSellway: false,
      image: [],
      imageurl: [],
      name: "",
      deviceclass: "",
      devicetype: "",
      price: "",
      weight: "",
      power: "",
      vendor: "",
      manufacture: "",
      remark: "",
    };
  },
  methods: {
    onClickLeft () {
      this.$router.push({ path: "/facility" });
    },
    uploadimg (file) {
      let param = new FormData();
      param.append("file", file);
      return this.$notoken("/main/upload", param)
    },
    //图片上传
    afterRead (file) {
      this.comshow = true;
      file.status = "uploading";
      file.message = "上传中...";
      setTimeout(() => {
        this.comshow = false;
        file.status = "done";
        file.message = "上传成功";
      }, 1500);
    },
    addfacility () {
      Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: "上传中",
      });
      let tempImage = this.image.map((v) => {
        return this.uploadimg(v.file);
      });
      Promise.all(tempImage)
        .then((res) => {
          this.imageurl = res.map(item => item.data.data)
          var splicing = this.imageurl.join(",");
          this.$axios("/index/createdevices", {
            imageurl: splicing, //设备图片，多图用 , 分开
            devicename: this.name, //设备名
            deviceclass: this.deviceclass, //设备品牌
            devicetype: this.devicetype, //设备型号
            weight: this.weight, //设备毛重
            power: this.power, //功率
            price: this.price, //租金
            vendor: this.vendor, //生产商
            manufacture: this.manufacture, //设备允许冻眠的产品
            remark: this.remark, //简介
          })
            .then((res) => {
              if (res.data.code == 1) {
                setTimeout(() => {
                  Toast.success("添加成功");
                  this.$router.push({ name: "facility" });
                }, 1000);
              } else {
                Toast.clear();
                Toast.fail("添加失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })

    },
  },
};
</script>
<style lang="less" scoped>
.facility-add {
  display: flex;
  flex-direction: column;
  &-items {
    width: 100%;
    font-family: '思源黑体-S';
    /deep/ .van-field__label {
      width: 2rem;
      color: black;
    }
    .spacing {
      width: 100%;
      height: 20px;
      background-color: #f5f5f5;
    }
    /deep/ .van-uploader__upload,
    /deep/ .van-uploader__preview,
    /deep/ .van-uploader__preview-image {
      border-radius: 15px;
      width: 1.8rem;
      height: 1.8rem;
    }
    .facility-introduce {
      /deep/ .van-field__label {
        width: 20%;
      }
      /deep/ .van-field__body {
        background-color: #f6f6f6;
        border-radius: 10px;
        padding: 20px;
      }
    }
  }
  &-set {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 100px auto;
    .set-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin: 0 auto;
      .set-spacing {
        height: 30px;
      }
      /deep/ .van-button {
        width: 80%;
        height: 80px;
        font-family: '思源黑体-L';
        font-size: 30px;
      }
    }
  }
}
</style>